<template>
  <a-layout style="min-width: 1200px;">
    <a-layout-header class="bg-header">
      <a-row>
        <a-col :span="6">
          <div class="logo">
            <img :src="logoUrl" class="logoImg" alt="logo">
            <h2 class="title">{{ title }}</h2>
          </div>
        </a-col>
        <a-col :span="10">
          <div class="nav-menu">
            <ul>
              <li :class="'m-item ' + (indexTabActive ? 'active' : '')">
                <a href="javascript:void(0);" @click="toIndexPage">{{$t('m.system.permission.other.menu_workbench')}}
                  <ych-icon type="home"/>
                </a>
              </li>
              <li :class="'m-item ' + (flowTabActive ? 'active' : '')">
                <a href="javascript:void(0);" @click="toFlowPage">{{$t('m.system.permission.other.menu_process')}}
                  <ych-icon type="laptop"/>
                </a>
              </li>
              <li :class="'m-item ' + (appTabActive ? 'active' : '')">
                <a href="javascript:void(0);" @click="toAppPage">{{$t('m.system.permission.other.menu_application')}}
                  <ych-icon type="gold"/>
                </a>
              </li>
            </ul>
          </div>
        </a-col>
        <a-col :span="8">
          <app-portal-user-menu @reloadPortlet="$emit('reloadPortlet')"/>
        </a-col>
      </a-row>
    </a-layout-header>
    <a-layout class="bg-content" v-if="showSideMenu">
      <a-layout-sider>
        <app-side-menu :menus="menuList"></app-side-menu>
      </a-layout-sider>
      <a-layout-content>
        <slot></slot>
      </a-layout-content>
    </a-layout>
    <a-layout-content class="bg-content" v-else>
      <slot></slot>
    </a-layout-content>
  </a-layout>
</template>

<!--<template>
  <div class="bg-gray">
    <header class="shadow">

    </header>
  </div>
</template>-->

<script>

  import AppSideMenu from './AppSideMenu'
  import { mapState } from 'vuex'
  import AppPortalUserMenu from './AppPortalUserMenu'

  export default {
    name: 'AppPortalGlobalLayout',
    components: {
      AppSideMenu,
      AppPortalUserMenu,
    },
    data () {
      return {
        logoUrl: window._CONFIG.logo_url || process.env.BASE_URL + 'logo.svg',
        menus: [],
        title: window._CONFIG.simply_name || this.$t('m.logo.simply_name')
      }
    },
    created () {
      this.menus = this.permissionMenuList.filter(vo => vo.back == '0')
    },
    methods: {
      toIndexPage () {
        if (!this.indexTabActive) {
          this.$router.push('/index/portal').catch(err => {})
        }
      },
      toFlowPage () {
        if (!this.flowTabActive) {
          this.$router.push('/process/startprocess').catch(err => {})
        }
      },
      toAppPage () {
        if (!this.appTabActive) {
          this.$router.push('/app/portal/apps').catch(err => {})
        }
      },
      getSubMenu (menuArr, current) {
        const menu = menuArr.find(menu => menu.path == current)
        if (menu) {
          return menuArr
        }
        for (let i = 0; i < menuArr.length; i++) {
          if (menuArr[i].children) {
            const result = this.getSubMenu(menuArr[i].children, current)
            if (result) {
              return result
            }
          }
        }
      },
      getGroupMenu (menuArr, groupId) {
        const menu = menuArr.find(menu => menu.groupId == groupId && menu.topFlag == '1')
        if (menu) {
          return menu
        }
        for (let i = 0; i < menuArr.length; i++) {
          if (menuArr[i].children) {
            const result = this.getGroupMenu(menuArr[i].children, groupId)
            if (result) {
              return result
            }
          }
        }
      }
    },
    computed: {
      ...mapState({
        // 主路由
        mainRouters: state => state.permission.addRouters,
        // 后台菜单
        permissionMenuList: state => state.user.permissionList
      }),
      indexTabActive () {
        return this.$route.fullPath == '/index/portal'
      },
      flowTabActive () {
        return this.$route.fullPath.startsWith('/process')
      },
      appTabActive () {
        return this.$route.fullPath == '/app/portal/apps'
      },
      showSideMenu () {
        return this.flowTabActive || !!this.currentMenu.groupId
      },
      currentMenu () {
        return this.subMenus.find(menu => menu.path == this.$route.fullPath)
      },
      subMenus () {
        return this.getSubMenu(this.menus, this.$route.fullPath) || []
      },
      menuList () {
        if (this.flowTabActive) {
          return this.subMenus
        } else if (this.currentMenu.groupId) {
          const topMenu = this.getGroupMenu(this.menus, this.currentMenu.groupId)
          if (topMenu) {
            return topMenu.children || []
          }
        }
        return []
      }
    }
  }

</script>

<style lang="less" scoped>

  body {
    color: #666;
  }

  .bg-header {
    background: #fff;
    margin: 0px;
    padding: 0px 15px;
    overflow: hidden;
    height: 50px;
    line-height: 50px;
    min-width: 1200px;
  }

  .bg-header .logo {
    margin-top: 3px;
    line-height: 47px;
    display: -webkit-inline-flex;
  }

  .bg-header .logo .title {
    margin: 0 0 0 8px;
  }

  .bg-header .logo .logoImg {
    vertical-align: top;
    border-style: none;
    width: 32px;
    height: 32px;
    margin-top: 6px;
  }

  .bg-content {
    min-width: 1200px;
  }

  .nav-menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .nav-menu > ul {
    display: flex;
  }

  .nav-menu > ul > li {
    line-height: 47px;
  }

  .nav-menu > ul > li a {
    color: #1a1d2d;
    padding: 15px 30px;
    font-weight: 600;
    font-size: 18px;
  }

  .nav-menu > ul > li.active a {
    background: #eef3fd;
    position: relative;
    color: #5585f0;
  }

  .nav-menu > ul > li.active a:after {
    content: ' ';
    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 50%;
    display: block;
    width: 30px;
    height: 4px;
    transform: translate(-50%);
    background: #5585f0;
  }

</style>
